<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:with="blogConfig=${@configTag.getConfigValueMap('zgblog')}" >

<head>
	<th:block th:include="zgblog/blog_include :: blogHeader(title=${blogConfig['oly.web.title']+'-'+menu.columnName},
keywords=${blogConfig['oly.web.keywords']+','+menu.keywords},
description=${menu.description},
blogConfig=${blogConfig})" />
</head>

<body>
	<th:block th:include="zgblog/blog_include::menu()" />
	<!-- 主体部分 -->
	<section class="zgblog-main-box">
		<div class="layui-row ">
			<div class="layui-col-md9  zgblog-left-box" id="miao-left">
				<div class="zgblog-left-content">
					<th:block th:include="zgblog/blog_include::blogArticle(post=${post})" />
				</div>
			</div>

			<!-- 主体部分右边 -->
			<div class="layui-col-md3 zgblog-right-box">
				<th:block th:include="zgblog/blog_include::rightCommon" />
			</div>
		</div>

	</section>

	<!-- 底部导航 -->
	<th:block th:include="zgblog/blog_include::bottom" />
	<th:block th:include="zgblog/blog_include::footer_js" />

	<script th:inline="JavaScript">
		$(document).ready(function () {

			var tags = [[${ tags }]], entries = [];
			$.each(tags, function (index, element) {
				entries.push({
					label: element.tagName,
					url: [[${ blogConfig['oly.web.index']}]] + "/tag/" + element.tagId,
					target: '_top'
				})
			});

			var settings = {
				entries: entries,
				width: $('#zgblog-tags').width(),
				height: $('#zgblog-tags').width(),
				radius: '60%',
				radiusMin: 75,
				bgDraw: true,
				bgColor: '#494A5F',
				opacityOver: 1.00,
				opacityOut: 0.05,
				opacitySpeed: 6,
				fov: 800,
				speed: 0.5,
				fontFamily: 'Oswald, Arial, sans-serif',
				fontSize: '15',
				fontColor: '#fff',
				fontWeight: 'normal', //bold
				fontStyle: 'normal', //italic 
				fontStretch: 'normal', //wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded
				fontToUpperCase: true
			};

			//var svg3DTagCloud = new SVG3DTagCloud( document.getElementById( 'holder'  ), settings );
			$('#tag-cloud').svg3DTagCloud(settings);

		});

		layui.use(['element', 'carousel', 'layer'], function () {
			var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
			var layer = layui.layer;
			var carousel = layui.carousel;

			//建造实例
			carousel.render({
				elem: '#test1',
				width: '100%' //设置容器宽度
				,
				arrow: 'always' //始终显示箭头
				//,anim: 'updown' //切换动画方式
			});

			window.onresize = function () {
				location.reload();
			}

			$(".zgblog-aside-button").click(function () {
				$(".zgblog-nav-aside").css("display", "block");

				if ($(".zgblog-nav-aside").hasClass("slideInDown")) {

					$(".zgblog-nav-aside").removeClass("slideInDown");
					$(".zgblog-nav-aside").addClass("slideOutUp");
					$("body").css("overflow-y", "auto");
				} else {

					$(".zgblog-nav-aside").removeClass("slideOutUp");
					$(".zgblog-nav-aside").addClass("slideInDown");
					$("body").css("overflow-y", "hidden");

				}

			});
			//监听导航点击
			element.on('nav(demo)', function (elem) {
				console.log(elem);

			});
		});
		$(".side_con>li").mousemove(function () {
			$(".side_con>li").removeClass("on");
			$(this).addClass("on");
		})
		// grab an element
		var elem = document.querySelector("nav");
		var headroom = new Headroom(elem, {
			"tolerance": 5,
			"offset": 205,
			"classes": {
				"initial": "animated",
				"pinned": "slideInDown",
				"unpinned": "slideOutUp"
			}
		});
		headroom.init();
	</script>
</body>

</html>